<template>
    <div class="card-container__warp" :style="{width: width, height: height}" v-show="show">
        <div class="card-container__header">
            <div class="header-left">
                <div class="header-left__label"></div>
                <p>{{title}}</p>
            </div>
            <div class="header-right">
                <p>{{label}}</p>
            </div>
        </div>
        <slot></slot>
        <div class="card-container__footer" v-if="more">
            <span>{{more}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "card",
        props: {
            title: String,
            label: String,
            more: String,
            width: String,
            height: String,
            show:{
                type:Boolean,
                default:true,
            },
            clickToGetMore:{
                type:Function,
                default:()=>({}),
            },
            clickToGetLabel:{
                type:Function,
                default:()=>({}),
            },
        },
        methods:{

        },
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/scss/variable';
    .card-container__warp{
        @include border-radius(4*$length);
        background-color: #fff;
        .card-container__header{
            height: 56*$length;
            border-bottom: 1*$length solid #EFEFEF;
            vertical-align: middle;
            @extend %flex-row-spb;
            .header-left{
                @extend %flex-row-spb;
                .header-left__label{
                    width: 4*$length;
                    height: 16*$length;
                    background-color: #00AAE6;
                    border-radius: 0 2*$length 2*$length 0;
                }
                > p{
                    margin-left: 12*$length;
                    @include fontStyle(16,22,500,#2F2F2F,left);
                }
            }
            .header-right{
                margin-right: 24*$length;
                //@include fontStyle(13,18,500,#999,left);
                @extend %cursorPointer;
                @extend %animate-transition;
                > p{
                    margin-left: 12*$length;
                    @include fontStyle(13,18,500,#999,left);
                }
                &:hover{
                    color: #00AAE6;
                }
            }
        }
        .card-container__footer{
            @include fontStyle(13,18,500,#999,center);
            height: 70*$length;
            line-height: 70*$length;
            > span{
                @extend %animate-transition;
                @extend %cursorPointer;
                &:hover{
                    color: #00AAE6;
                }
            }
        }
    }
</style>
